// base
	$base: 8px;
	$css-path: ".";

// colour
	// basic colour
		$palette-blue:           #2196f3;
		$palette-blue-dark:      #0d47a1;
		$palette-blue-dark-m:    #1976d2;
		$palette-blue-light:     #bbdefb;
		$palette-blue-light-m:   #64b5f6;

		$palette-green:          #8bc34a;
		$palette-green-dark:     #33691e;
		$palette-green-dark-m:   #689f38;
		$palette-green-light:    #dcedc8;
		$palette-green-light-m:  #aed581;

		$palette-purple:         #9c27b0;
		$palette-purple-dark:    #4a148c;
		$palette-purple-dark-m:  #7b1fa2;
		$palette-purple-light:   #e1bee7;
		$palette-purple-light-m: #ba68c8;

		$palette-red:            #f44336;
		$palette-red-dark:       #b71c1c;
		$palette-red-dark-m:     #d32f2f;
		$palette-red-light:      #ffcdd2;
		$palette-red-light-m:    #e57373;

		$palette-yellow:         #ffc107;
		$palette-yellow-dark:    #ff6f00;
		$palette-yellow-dark-m:  #ffa000;
		$palette-yellow-light:   #ffecb3;
		$palette-yellow-light-m: #ffd54f;

	// black and white
		$black:                  #000000;
		$black-bg:               #e0e0e0;
		$black-hint:             #9e9e9e;
		$black-sec:              #616161;
		$black-text:             #212121;

		$white:                  #ffffff;
		$white-bg:               #f5f5f5;
		$white-bg-dark:          #eeeeee;
		$white-bg-light:         #fafafa;

	// brand colour
		$brand-color:            #4caf50;
		$brand-color-dark:       #1b5e20;
		$brand-color-dark-m:     #388e3c;
		$brand-color-light:      #c8e6c9;
		$brand-color-light-m:    #81c784;

	// list
		$palette-color:         $brand-color, $palette-blue, $palette-green, $palette-purple, $palette-red, $palette-yellow;
		$palette-color-dark:    $brand-color-dark, $palette-blue-dark, $palette-green-dark, $palette-purple-dark, $palette-red-dark, $palette-yellow-dark;
		$palette-color-dark-m:  $brand-color-dark-m, $palette-blue-dark-m, $palette-green-dark-m, $palette-purple-dark-m, $palette-red-dark-m, $palette-yellow-dark-m;
		$palette-color-light:   $brand-color-light, $palette-blue-light, $palette-green-light, $palette-purple-light, $palette-red-light, $palette-yellow-light;
		$palette-color-light-m: $brand-color-light-m, $palette-blue-light-m, $palette-green-light-m, $palette-purple-light-m, $palette-red-light-m, $palette-yellow-light-m;
		$palette-list:          "alt", "blue", "green", "purple", "red", "yellow";

// font
	$font-fam:       Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	$font-fam-mono:  Monaco, Menlo, Consolas, "Courier New", monospace;
	$font-fam-serif: Georgia, serif;

	// font size
		$font-size:    ($base * 1.75);          // 14px
		$font-size-h1: ($base * 5.5);           // 44px
		$font-size-h2: ($base * 4.25);          // 34px
		$font-size-h3: ($base * 3);             // 24px
		$font-size-h4: ($base * 2.5);           // 20px
		$font-size-h5: ($base * 2);             // 16px
		$font-size-h6: ($base * 1.5);           // 12px
		// material
			$font-size-display-4: ($base * 14); // 112px
			$font-size-display-3: ($base * 7);  // 56px

	// font weight
		$font-weight-medium: 500;
		$font-weight-normal: 400;
		$font-weight-light:  300;

	// line height
		$line-height:    ($base * 2.5);         // 20px
		$line-height-h1: ($base * 6);           // 48px
		$line-height-h2: ($base * 5);           // 40px
		$line-height-h3: ($base * 4);           // 32px
		$line-height-h4: ($base * 3.5);         // 28px
		$line-height-h5: ($base * 3);           // 24px
		$line-height-h6: ($base * 2.5);         // 20px
		// material
			$line-height-display-4: 1.1;        // missing in google material design guideline
			$line-height-display-3: 1.1;        // missing in google material design guideline

	// margin
		$margin-base: $base;                    // 8px
		$margin-lg:   ($base * 6);              // 48px
		$margin-md:   ($base * 3);              // 24px
		$margin-sm:   ($base * 1.5);            // 12px

	// other
		$avatar-height: ($base * 5);            // 40px
		$btn-height:    ($base * 4.5);          // 36px
		$header-height: ($base * 7);            // 56px
		$nav-height:    ($base * 6);            // 48px
		// 
			$cell-height:      $nav-height;     // 48px
			$fbtn-height:      $avatar-height;  // 40px
			$input-height:     $btn-height;     // 36px
			$pcircular-height: $avatar-height;  // 40px
			$tile-height:      $nav-height;     // 48px

// grid
	$grid-cols: 12;
	$grid-gutter: ($base * 2);

// link
	$link-color: $palette-blue;
	$link-color-hover: $palette-blue-dark;

// responsive
	$screen-lg: 1440px;
	$screen-md: 992px;
	$screen-sm: 768px;
	$screen-xs: 480px;

// timing
	$timing: cubic-bezier(0.4, 0, 0.2, 1);

// z-index
	$bottom-base:  10;
	$content-base: 20;
	$header-base:  30;
	$top-base:     40;